<template>
    <div class="question_chart" ref="YearTrend"></div>
</template>
<script>
import resize from '@/mixins/resize';
import echarts from 'echarts';
import {remoteYearTrendList} from '@/api/dashboard'

export default {
    name: 'YearTrend',
    mixins: [resize],
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initEchart();
        });
    },
    methods: {
        async initEchart() {
            let res = await remoteYearTrendList();
            let {data}=res;
            let showData = [];
            let labelData = [];
            let objectData = {};
            const colors = [
                {
                    start:'#60F5FF',
                    end:'#3FA4FF'
                },
                {
                    start:'#FF72A6',
                    end:'#FF3657'
                },
                {
                    start:'#63FBFC',
                    end:'#05A998'
                },
                {
                    start:'#40A0FA',
                    end:'#2D5CBD'
                }
            ];
            data.map((item, index) => {
                let { monthStr, ptMap } = item;
                labelData.push(monthStr);
                if (index == 0) {
                    for (let i in ptMap) {
                        let value = ptMap[i] || 0;
                        objectData[i] = [value];
                    }
                } else {
                    for (let i in ptMap) {
                        let value = ptMap[i] || 0;
                        objectData[i] = [...objectData[i], value];
                    }
                }
            });
            let labelKeys = Object.keys(objectData);
            for (let label in objectData) {
                let index = labelKeys.findIndex(item=>item==label)
                showData.push({
                    name: label,
                    type: 'bar',
                    barGap: .3,
                    barMaxWidth:10,
                    barMinWidth:2,
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: colors[index].start || colors[0].start  // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: colors[index].end || colors[0].end // 100% 处的颜色
                            }], false),
                            shadowBlur: 0,
                        }
                    },
                    data: objectData[label]
                });
            }
            
            this.myChart = echarts.init(this.$refs.YearTrend);

            this.myChart.setOption(
                {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    grid: {
                        left: 0,
                        right: 0,
                        top: 20,
                        bottom: 0,
                        containLabel: true
                    },
                    legend: {
                        top: 0,
                        left: 'left',
                        itemHeight: 4,
                        itemWidth: 7,
                        itemGap: 5,
                        textStyle: {
                            fontSize: 8,
                            color: '#fff'
                        },
                        selectedMode: false
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: { show: false },
                            data: labelData,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#1786EF'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    fontSize: 1
                                }
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#1786EF'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show:false,
                                textStyle: {
                                    fontSize: 10
                                }
                            },
                        }
                    ],
                    series: showData
                },
                true
            );
        }
    }
};
</script>
<style lang="scss" scoped>
.question_chart {
    width: 100%;
    height: 100%;
}
</style>
